<template>
  <el-button
    :disabled="disabled"
    :loading="loading"
    :class="!disabled && 'btn-hover'"
    size="small"
    plain
    class="plain-create-btn"
    @click="$emit('click')">
    <slot />
    <i v-if="showIcon" :class="iconName" style="font-size: 14px;" />
  </el-button>
</template>

<script>
export default {
  name: 'PlainCreateBtn',
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    iconName: {
      type: String,
      default: 'el-icon-plus'
    }
  }
};
</script>

<style lang="scss" scoped>
.plain-create-btn {
  background: #fff !important;
  font-size: 14px;
  padding-left: 8px;
  color: #406EFF !important;
  padding-right: 8px;
  border-radius: 4px;
  border-color: #406EFF !important;
  box-sizing: border-box;
}
.btn-hover:hover {
  background-color: #406EFF !important;
  color: #fff !important;
}
</style>
